<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <style lang="">
        div {
            width: 200px;
            margin: 200px auto;
            background: skyblue;
            text-align: center;
            height: 120px;
            line-height: 120px;
            border-radius: 4px;
        }
    </style>
</head>

<body>
    <div>
        <i class="hh">10</i> :
        <i class="mm">00</i> :
        <i class="ss">00</i>
    </div>
    <script>
        var id = setInterval(function() {
            // 秒
            var currentSecond = $(".ss").text();
            currentSecond--;
            var newSecond = currentSecond < 10 ? "0" + currentSecond : currentSecond;
            $(".ss").text(newSecond);

            //只有秒数小于零时, 分数才能相对应的减一;
            if (currentSecond < 0) { //秒数小于零时,秒数恢复到59,分数对应也要减去一;
                currentSecond = 59;
                $(".ss").text(currentSecond);
                var currentMinute = $(".mm").text(); //获取分数
                currentMinute--; //当秒数为零时,分数会相对应的自减一次;
                var newMinute = currentMinute < 10 ? "0" + currentMinute : currentMinute;
                console.log(newMinute);

                $(".mm").text(newMinute);
            }
            // 只有分数小于零时,时数才能相对应的自减一次;
            if (currentMinute < 0) {
                currentMinute = 59;
                $(".mm").text(currentMinute);

                var currentHinute = $(".hh").text();
                currentHinute--;
                var newHinute = currentHinute < 10 ? "0" + currentHinute : currentHinute;
                $(".hh").text(newHinute);
            }

            if (currentHinute < 0) {
                clearInterval(id);
                $(".hh").text("00");
                $(".mm").text("00");
                $(".ss").text("00");
                $("div").css("background", "red");
            }

        }, 1)

        $(document).click(function() {
            clearInterval(id);
        })
    </script>
</body>

</html>